<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ColorChange demo</title>
    <link href="css/highlight.min.css" rel="stylesheet" type="text/css" />
    <link href="css/coloris.min.css" rel="stylesheet" type="text/css" />
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <h3 class="mt">ColorChange Example</h3> | <a href="./colorpick.html"><h5 class="mt">ColorPick Example</h5></a>
    <div class="main">
    <div class="left">
        <div class='title'>img</div>
        <div class="block">
            <img class="cc" src="./img/1.jpeg" />
            <img class="cc" src="./img/2.jpeg"/>
        </div>
        <div class='title'>background</div>
        <div class="block">
            <div class="cc bg1" style="background:url(./img/3.jpeg);background-size: 100% 100%" ></div>
            <div class="cc bg2" style="background:url(./img/2.jpeg);background-size: 100% 100%" ></div>
        </div>
        <div class='title'>video</div>
        <div class="block">
            <video class="cc video1" src="./img/video3.mp4" autoplay loop muted></video>
            <video class="cc video2" src="./img/video4.mp4" autoplay loop muted></video>
        </div>
        <div class='title'>canvas</div>
        <div class="block">
            <canvas id="canvas1" class="cc canvas1"></canvas>
        </div>
        <script>
            var c=document.getElementById("canvas1");
            var ctx=c.getContext("2d");
            ctx.fillStyle="#338888";
            ctx.fillRect(0,0,300,200);
            ctx.fillStyle="#ddd";
            ctx.font = "20pt Calibri";
            ctx.fillText('color change ...', 50,90)
        </script>
    </div>
    <div class="right">
        <div class="panel">
            <div class="panel-top square">
                <div class="control-left">
                    <input type="text" class="coloris" value="#ff9900" />
                    <input type="checkbox" id="ckbBrightness" /> <label for="ckbBrightness">brightness</label>
                    <input type="checkbox" id="ckbSaturate" /> <label for="ckbSaturate">saturate</label>
                </div>
                <div class="control-right">
                    <div class="btn change">Change</div><div class="btn cancel">Cancel</div>
                </div>
            </div>
            <div class="panel-bottom">
                <pre>
                        <code class="language-html">
    &lt;img class="cc" src="./img/1.jpeg" /&gt;
    &lt;div class="cc" style="background:url(./img/2.jpeg)" &gt;&lt;/div&gt;
    &lt;video class="cc" src="./img/video3.mp4" &gt;&lt;/video&gt;
    &lt;canvas class="cc"  &gt;&lt;/canvas&gt;

                            </code>
                            </pre>
<pre>
    <code class="language-javascript">
    import {ColorChange} from 'color-change'

    // Select img, background, video, canvas
    var cc = new ColorChange('.cc')

    // Setting change color
    cc.setColor('#ff9900')

    // Or callback after completion
    cc.setColor('#369').then(()=>{
        console.log('completion...')
    })
</code>
                </pre>
                <div class="warinfo">Note : URLs not support cross domain access !
                </div>
                <div class="link">

                    <a class="icon github" href="https://github.com/zhu18/color-change">
                        <svg style="vertical-align: top;margin-top: 5px;" height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github v-align-middle">
                            <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
                        </svg>
                    </a>  
                    <a class="icon npm" href="https://www.npmjs.com/package/color-change">
                        <svg style="height: 20px;
                        vertical-align: top;
                        margin-top: 13px;" viewBox="0 0 780 250"><path fill="#231F20" d="M240,250h100v-50h100V0H240V250z M340,50h50v100h-50V50z M480,0v200h100V50h50v150h50V50h50v150h50V0H480z M0,200h100V50h50v150h50V0H0V200z"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script src="js/coloris.min.js"></script>
<script type="text/javascript">
    Coloris({
        el: '.coloris',
        alpha: false,
        swatches: [
            '#264653',
            '#2a9d8f',
            '#e9c46a',
            '#f4a261',
            '#e76f51',
            '#d62828',
            '#023e8a',
            '#0077b6',
            '#0096c7',
            '#00b4d8',
            '#48cae4',
        ]
    });
</script>

    <script type="module">
        import {ColorChange,ColorPick} from './js/color-change.esm.min.js'

        let cc=null;
        let coloris=document.querySelector('.coloris');
        let btnChange=document.querySelector('.change');
        let btnCancel=document.querySelector('.cancel');
        let ckbBrightness=document.querySelector('#ckbBrightness');
        let ckbSaturate=document.querySelector('#ckbSaturate');

         btnChange.onclick=()=>{
            let color=coloris.value
            let isBrightness=ckbBrightness.checked
            let isSaturate=ckbSaturate.checked
            
            console.log(color,isSaturate,isBrightness)

            // color change 
            cc = new ColorChange('.cc',isBrightness,isSaturate)
            
            cc.setColor(color)
         }

        btnCancel.onclick=()=>{
            cc&&cc.clear()
        }
        
     
        
    </script>
    
</body>
</html>